<template> 
	<view class="date-query u-rela" :style="{
		background: bgColor
	}">
		<view :id="id" v-show="!show">
			<scroll-view scroll-x class="scroll-view" :scroll-left="scrollLeft" scroll-with-animation> 
				<view class="scroll-box u-flex"  :class="{'tabs-scorll-flex': !isScroll}">
					<view class="tab-item " :id="'tab-item-' + index"  v-for="(item, index) in list" :key="index" 					
					 @tap="clickTab(index,item)"
					 :style="[tabItemStyle(index)]"> 
						<view class="value">{{ item.value}}</view>
						<view class="name">{{ item.name}}</view>
					</view> 
					<view style="min-width:84rpx;min-height:90rpx;"></view>
				</view>
			</scroll-view>
			<view style="margin-top: 20rpx;">
				<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @change="changeDay">
					<view class="u-f-ajc">
						<uni-icons type="bottom" color="#3E3E3E" size="20" />
					</view>
				</uni-datetime-picker>
			</view>
		</view>	
	</view>
</template>

<script>
	// import calendar from './calendar'
	export default {
		name: "j-date",	
		// components:{calendar},
		props: {
			// 导航菜单是否需要滚动，如只有2或者3个的时候，就不需要滚动了，此时使用flex平分tab的宽度
			isScroll: {
				type: Boolean,
				default: true
			},  
			// 字体大小
			fontSize: {
				type: [String, Number],
				default: 30
			},
			// 过渡动画时长, 单位ms
			duration: {
				type: [String, Number],
				default: 0.5
			},
			// 选中项的主题颜色
			activeColor: {
				type: String,
				default: '#3377FF'
			},
			// 未选中项的颜色
			inactiveColor: {
				type: String,
				default: '#8F9BB3'
			},
			// 菜单底部移动的bar的宽度，单位rpx
			barWidth: {
				type: [String, Number],
				default: 90
			},
			// 移动bar的高度
			barHeight: {
				type: [String, Number],
				default: 5
			},
			// 单个tab的左或有内边距（左右相同）
			gutter: {
				type: [String, Number],
				default: 30
			},
			// 导航栏的背景颜色
			bgColor: {
				type: String,
				default: '#ffffff'
			},
			// 读取传入的数组对象的属性(tab名称)
			name: {
				type: String,
				default: 'name'
			},
			// 读取传入的数组对象的属性(徽标数)
			count: {
				type: String,
				default: 'count'
			},
			// 徽标数位置偏移
			offset: {
				type: Array,
				default: () => {
					return [5, 20]
				}
			},
			// 活动tab字体是否加粗
			bold: {
				type: Boolean,
				default: true
			},
			// 当前活动tab item的样式
			activeItemStyle: {
				type: Object,
				default() {
					return {}
				}
			},
			// 是否显示底部的滑块
			showBar: {
				type: Boolean,
				default: true
			},
			// 底部滑块的自定义样式
			barStyle: {
				type: Object,
				default() {
					return {}
				}
			}, 
			showfilter: {
				type: Boolean,
				default: true
			},
			// 
			// list: {
			// 	type: Array,
			// 	default: () => {
			// 		return [{}]
			// 	}
			// },
		},
		data() {
			return {
				single:'',
				list:[],
				current:6,
				scrollLeft: 30, // 滚动scroll-view的左边滚动距离
				tabQueryInfo: [], // 存放对tab菜单查询后的节点信息
				componentWidth: 0, // 屏幕宽度，单位为px
				scrollBarLeft: 0, // 移动bar需要通过translateX()移动的距离
				parentLeft: 0, // 父元素(tabs组件)到屏幕左边的距离
				id: 'jfkj', // id值
				currentIndex: this.current,
				barFirstTimeMove: true, // 滑块第一次移动时(页面刚生成时)，无需动画，否则给人怪异的感觉
				show:false
			};
		},
		watch: {
			// 监听tab的变化，重新计算tab菜单的布局信息，因为实际使用中菜单可能是通过
			// 后台获取的（如新闻app顶部的菜单），获取返回需要一定时间，所以list变化时，重新获取布局信息
			list(n, o) {
				// list变动时，重制内部索引，否则可能导致超出数组边界的情况
				if(n.length !== o.length) this.currentIndex = 0;
				// 用$nextTick等待视图更新完毕后再计算tab的局部信息，否则可能因为tab还没生成就获取，就会有问题
				this.$nextTick(() => {
					this.init();
				});
			},
			current: {
				immediate: true,
				handler(nVal, oVal) {
					// 视图更新后再执行移动操作
					this.$nextTick(() => {
						this.currentIndex = nVal;
						this.scrollByIndex();
					});
				}
			},
		},
		computed: {
			// 移动bar的样式
			tabBarStyle() {
				let style = {
					width: this.barWidth + 'rpx',
					transform: `translate(${this.scrollBarLeft}px, -100%)`,
					// 滑块在页面渲染后第一次滑动时，无需动画效果
					'transition-duration': `${this.barFirstTimeMove ? 0 : this.duration }s`,
					'background-color': this.activeColor,
					height: this.barHeight + 'rpx',
					opacity: this.barFirstTimeMove ? 0 : 1,
					// 设置一个很大的值，它会自动取能用的最大值，不用高度的一半，是因为高度可能是单数，会有小数出现
					'border-radius': `${this.barHeight / 2}px`
				};
				Object.assign(style, this.barStyle);
				return style;
			},
			// tab的样式
			tabItemStyle() {
				return (index) => {
					let style = { }; 
					if (index == this.current) {
						style.color =this.activeColor; 
						style.fontWeight = 'bold';
						style.boxShadow='0rpx 3rpx 12rpx 0rpx rgba(31, 46, 77, 0.1)';	
						style.margin='10rpx';
						style.borderRadius='10rpx';
						style.borderBottom='5rpx solid #3377FF'
					} else {
						style.color = this.inactiveColor;
						style.margin='10rpx';
					}
					return style;
				}
			}
		},
	 
		methods: {	
				getDays(arr){
					// let arr=[-6,-5,-4,-3,-2,-1,0]
					this.list = arr.map(item=>{
						let day = this.fun_date(item)
						return{
							value:day.substring(5),
							name:this.fun_week(day),
							date:day
						}
					})  
				},
				 fun_date(num) { 
						let date1 = new Date();
						//今天时间
						let today = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate()
						
						let date2 = new Date(date1);
						 date2.setDate(date1.getDate() + num);
						 //num是正数表示之后的时间，num负数表示之前的时间，0表示今天
						 let time2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();   
						return time2; 
						
					},
					fun_week(datestr){
					    let weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
					    // let week = weekArray[new Date(datestr).getDay()];
						let week = weekArray[new Date(datestr.replace(/-/g,'/')).getDay()];
					    return week;
					},
					
			// 设置一个init方法，方便多处调用
			async init() {
				// 获取tabs组件的尺寸信息
				// let tabRect = await this.$uGetRect('#' + this.id);
				// // tabs组件距离屏幕左边的宽度
				// this.parentLeft = tabRect.left; 
				// // tabs组件的宽度
				// this.componentWidth = tabRect.width;
				// this.getTabRect();
				const query = uni.createSelectorQuery().in(this);
				query.select('#' + this.id).boundingClientRect(data => {
				  // tabs组件距离屏幕左边的宽度
				  this.parentLeft = data.left; 
				  // tabs组件的宽度
				  this.componentWidth = data.width;
				  this.getTabRect();
				}).exec();
				
			},
			// 点击某一个tab菜单
			clickTab(index,item) { 
			
				// 点击当前活动tab，不触发事件
				this.current=index
				if(index == this.currentIndex) return ;
				// 发送事件给父组件 
				this.$emit('changeDay', {
					index:index,
					value:item.value,
					date:item.date
				});
			},
			changeDay(e){
				// console.log(e);
				this.$emit('changeDay', { 
					date:e
				});
				let arr = []
				let day = -(this.dateDiff(e))
				for (var i = day-6; i < day+1; i++) {
					arr.push(i)
				} 
				this.current = 6
				this.getDays(arr)
				
			},
		    dateDiff(sDate2) {
				var s1 = new Date(sDate2.replace(/-/g, "/"));
				var s2 = new Date();//当前日期
				var days = s2.getTime() - s1.getTime();
				var time = parseInt(days / (1000 * 60 * 60 * 24));
				return time
			},
			
			// 查询tab的布局信息
			getTabRect() {
				// 创建节点查询
				let query = uni.createSelectorQuery().in(this);
				// 历遍所有tab，这里是执行了查询，最终使用exec()会一次性返回查询的数组结果
				for (let i = 0; i < this.list.length; i++) {
					// 只要size和rect两个参数
					query.select(`#tab-item-${i}`).fields({
						size: true,
						rect: true
					});
				}
				// 执行查询，一次性获取多个结果
				query.exec(
					function(res) {
						this.tabQueryInfo = res;
						// 初始化滚动条和移动bar的位置
						this.scrollByIndex();
					}.bind(this)
				);
			},
			// 滚动scroll-view，让活动的tab处于屏幕的中间位置
			scrollByIndex() {
				// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
				let tabInfo = this.tabQueryInfo[this.currentIndex];
				
				if (!tabInfo) return;
				// 活动tab的宽度
				let tabWidth = tabInfo.width;
				// 活动item的左边到tabs组件左边的距离，用item的left减去tabs的left
				let offsetLeft = tabInfo.left - this.parentLeft;
				// 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
				let scrollLeft = offsetLeft - (this.componentWidth - tabWidth) / 2;
				
				this.scrollLeft = scrollLeft < 0 ? 0 : scrollLeft;
				// 当前活动item的中点点到左边的距离减去滑块宽度的一半，即可得到滑块所需的移动距离
				let left = tabInfo.left + tabInfo.width / 2- this.parentLeft;
				// 计算当前活跃item到组件左边的距离
				this.scrollBarLeft = left - uni.upx2px(this.barWidth) / 2;
				// 第一次移动滑块的时候，barFirstTimeMove为true，放到延时中将其设置false
				// 延时是因为scrollBarLeft作用于computed计算时，需要一个过程需，否则导致出错
				if(this.barFirstTimeMove == true) {
					setTimeout(() => {
						this.barFirstTimeMove = false;
					}, 100)
				}
			},
			changePop(){
				this.$emit('changePop')
			}
		},
		created(){
			let arr=[-6,-5,-4,-3,-2,-1,0]
			this.getDays(arr);
		},
		mounted() {
			this.init();
		}
	};
</script>

<style lang="scss" scoped>
	// @import "uview-ui/libs/css/style.components.scss";
	
	view,
	scroll-view {
		box-sizing: border-box;
	} 
	.query-icon-box{
		width: 96rpx;
		height: 120rpx;  
		position: absolute;
		right:0;
		top:30rpx; 
		z-index:1;
		overflow: hidden; 
		 image{
			 top:40rpx;
			 left:30rpx;
			 position: absolute;
			 display: block;
		 }
	}
	.query-icon-box:after {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;  
	    z-index: -1; 
		background: hsla(0, 0%, 100%, .75);  
		backdrop-filter: blur(4rpx);  
	}
	.tab-bar {
		position: absolute;
		bottom: 0;
	}
	
	.tabs-scorll-flex {
		// @include vue-flex;
		justify-content: space-between;
	}
	.date-query{
	   padding:20rpx 15rpx 20rpx;
	   
	   .scroll-view{ 
			width: 100%;
			white-space: nowrap;
			position: relative;
			height: 120rpx;
	   	}
		.scroll-box {
			position: relative;
			/* #ifdef MP-TOUTIAO */
			white-space: nowrap;
			/* #endif */
			position: relative;  
			.tab-item {
				  padding:18rpx 15rpx;
				  position: relative;
				  /* #ifndef APP-NVUE */
				  display: inline-block;
				  /* #endif */
				  text-align: center;
				  transition-property: background-color, color;
				.value{		
					font-size: 32rpx;
					margin-bottom:10rpx;
				}
				.name{
					font-size: 22rpx;
				}
				
			}
		} 
	}
	
	/* #ifndef APP-NVUE */
	::-webkit-scrollbar,
	::-webkit-scrollbar,
	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
	/* #endif */ 
	/* #ifdef H5 */
	// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
	scroll-view ::v-deep ::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
	/* #endif */ 
</style>
